<%--
  Created by IntelliJ IDEA.
  User: ajinlong
  Date: 2020/12/23
  Time: 23:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: auto;
      padding: 0%;
      font-size: 15px;
      list-style: none;
    }

    /* 时间：2020-12-10这里是定义了一个事件吗？ */

    a:hover {
      color: red;
    }

    /*事件：2020-12-10还可以这样定义标签的一些属性*/
    li {
      float: left;
      width: 6.25%;
      text-align: center;
    }

    li a {
      font-size: 12px;
      color: white;
      text-align: center;
      text-decoration: none;
    }

    li a:hover {
      color: yellow;

    }

    /* 时间2020-12-7，如果不把样式提出了作为外样式，hover这个动作检测就会被阻塞掉 */
  </style>
  <title>购物商城</title>
</head>

<body>

<div>
  <!-- 头页面的第一部分 -->
  <div style=" height: 45px;background-color: #444444;"></div>
  <div style="background-color:#333333;text-align: center;line-height: 45px;height: 45px">
    <span style="color: #AEAEAE;">官方网站：</span>&nbsp;&nbsp;&nbsp;
    <a href="http://bing.ioliu.cn" style="color: #AEAEAE;">http://bing.ioliu.cn</a>&nbsp;&nbsp;&nbsp;
    <a href="" style="color: #AEAEAE;">[登录]</a> &nbsp;&nbsp;&nbsp;
    <a href="" style="color: #AEAEAE;">[免费注册]</a>&nbsp;&nbsp;&nbsp;
    <a href="" style="color: #AEAEAE;">[我的购物车]</a>&nbsp;&nbsp;&nbsp;
    <a href="" style="color: #AEAEAE;">[我的订单]</a>&nbsp;&nbsp;&nbsp;
    <a href="" style="color: #AEAEAE;">[设为首页]</a>&nbsp;&nbsp;&nbsp;
    <a href="" style="color: #AEAEAE;">[加入收藏]</a>&nbsp;&nbsp;&nbsp;
  </div>
  <!-- 头页面的第二部分 -->
  <div style="width: 1000px; position: relative; background-color: rgb(255 , 255, 255); height: 120px;">
    <img src="images\images\article\logo.gif" alt="购物商城">
    <img src="images\images\banner.gif" style="margin-top: 10px;" alt="购物柜">

    <div style="position: absolute;right: 50px;top: 20px;">
      <div style="height: 20px;width: 70px; line-height: 20px; text-align: center; border:1px solid #cccccc;">
        <a href="" style="text-decoration :none;">认识我们</a>
      </div>
      <div
              style="height: 20px;width: 70px; line-height: 20px; text-align: center; margin-top: 10px; border: 1px solid #cccccc;">
        <a href="" style="text-decoration: none;">联系我们</a>
      </div>
    </div>
  </div>

  <!-- 头页面的第三部分 -->
<%--  TODO 怎么用js把a标签的数据，发送给服务器呢？--%>
  <div style="background-color:red; height: 50px;">
    <div style="width: 1000px;height: 50px;">
      <ul style="line-height: 50px;">
        <li> <a href="">首页</a> </li>
        <li> <a href="http://localhost:8080/${pageContext.request.contextPath}/IndexServlet?type=1001">护肤</a> </li>
        <li> <a href="">彩妆</a> </li>
        <li> <a href="">香气</a> </li>
        <li> <a href="">身体护理</a> </li>
        <li> <a href="">礼盒套装</a> </li>
        <li> <a href="">母婴专区</a> </li>
        <li> <a href="">男士专区</a> </li>
        <li> <a href="">粉底</a> </li>
        <li> <a href="">粉饼</a> </li>
        <li> <a href="">睫毛膏</a> </li>
        <li> <a href="">唇彩</a> </li>
        <li> <a href="">腮红</a> </li>
        <li> <a href="">食品保健</a> </li>
        <li> <a href="">瘦身类</a> </li>
        <li> <a href="">美容类</a> </li>
      </ul>
    </div>

  </div>
</div>
</body>

</html>

